<template>
  <u-popup :show="show" mode="center" @close="close" @open="open">
    <view
      v-if="type === 'isCanyinProduce'"
      class="make"
      @touchstart="touchStart"
      @touchend="touchEnd"
    >
      <u-row customStyle="font-size: 34rpx;color: #acadaf;"
        ><u-col textAlign="center">火锅店（禅城）</u-col></u-row
      >
      <u-row
        justify="space-between"
        :customStyle="touchIndex < 2 ? headStyle : headStyle1"
      >
        <block v-if="touchIndex === 0"
          ><u-col span="6">制作单-堂食</u-col></block
        >
        <block v-if="touchIndex === 1">
          <u-col span="6">制作单-打包</u-col>
          <u-col span="6" textAlign="right">取单号：1110</u-col>
        </block>
        <block v-if="touchIndex === 2"
          ><u-col span="6">制作单-同城配送</u-col></block
        >
      </u-row>
      <u-row
        v-if="touchIndex < 2"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
      >
        <u-col span="6">桌号：16</u-col>
      </u-row>
      <u-row
        v-else
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        <u-col>预约送达：12-29 14:30</u-col>
      </u-row>
      <u-row
        justify="space-between"
        align="top"
        customStyle="font-size: 34rpx;padding: 20rpx 0 0 0; box-sizing: border-box; color:#88898c;"
      >
        <u-col span="4" textAlign="center">商品名称</u-col>
        <u-col span="4" textAlign="center">规格</u-col>
        <u-col span="1" textAlign="center">数量</u-col>
        <!--        <u-col span="1" textAlign="center">价格</u-col>-->
        <!--        <u-col span="1" textAlign="center">小计</u-col>-->
      </u-row>
      <u-row
        justify="space-between"
        customStyle="font-size: 34rpx; color:#88898c;"
      >
        <u-col span="4" textAlign="center">三彩无骨鱼</u-col>
        <u-col span="4" textAlign="center">500G/微辣/草鱼</u-col>
        <u-col span="1" textAlign="center">1.0</u-col>
        <!--        <u-col span="1" textAlign="center">18</u-col>-->
        <!--        <u-col span="1" textAlign="center">18</u-col>-->
      </u-row>

      <u-row
        customStyle="font-size: 34rpx;border-bottom: 1rpx dashed #efefef;padding: 20rpx 0 100rpx 0;box-sizing: border-box; color:#88898c;"
        >备注：</u-row
      >
      <u-row
        customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;"
        >打印时间：2022-02-03 12:32</u-row
      >
    </view>

    <view v-else class="make" @touchstart="touchStart" @touchend="touchEnd">
      <u-row customStyle="font-size: 34rpx;color: #acadaf;"
        ><u-col textAlign="center">火锅店（禅城）</u-col></u-row
      >
      <u-row
        v-if="touchIndex === 0"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;border-bottom: 1rpx dashed #efefef;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        结账单-堂食-已结
      </u-row>
      <u-row
        v-if="touchIndex === 1"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;border-bottom: 1rpx dashed #efefef;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        结账单-打包-已结
      </u-row>
      <u-row
        v-if="touchIndex === 2"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        结账单-同城配送-已结
      </u-row>
      <u-row
        v-if="touchIndex === 2"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        预约送达：12-29 14:30
      </u-row>
      <u-row
        v-if="touchIndex === 2"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
      >
        配送信息：文化北路181号城阳大夏1101云启点 张小泉 13054458888
      </u-row>
      <u-row
        v-if="touchIndex < 2"
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
      >
        <u-col span="6">桌号：16</u-col>
      </u-row>
      <u-row
        justify="space-between"
        align="top"
        customStyle="font-size: 34rpx;padding: 20rpx 0 0 0; box-sizing: border-box; color:#88898c;"
      >
        <u-col span="4">商品名称</u-col>
        <u-col span="3" textAlign="center">数量</u-col>
        <u-col span="3" textAlign="center">小计</u-col>
      </u-row>
      <u-row
        justify="space-between"
        customStyle="font-size: 34rpx; color:#88898c;"
      >
        <u-col span="4">三彩无骨鱼</u-col>
        <u-col span="3" textAlign="center">1.0</u-col>
        <u-col span="3" textAlign="center">18</u-col>
      </u-row>

      <u-row
        customStyle="font-size: 34rpx;border-bottom: 1rpx dashed #efefef;padding: 20rpx 0 100rpx 0;box-sizing: border-box; color:#88898c;"
        >备注：</u-row
      >
      <u-row
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
      >
        <u-col span="6">优惠券名称</u-col>
        <u-col span="6" textAlign="right">-10</u-col>
      </u-row>
      <u-row
        justify="space-between"
        customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
      >
        <u-col span="6">消费合计</u-col>
        <u-col span="6" textAlign="right">10</u-col>
      </u-row>
      <u-row
        customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;"
        >打印时间：2022-02-03 12:32</u-row
      >
      <u-row
        customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;"
        >联系地址：佛山市禅城区祖庙街道城央大夏1101</u-row
      >
      <u-row
        customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;"
        >联系电话：202-66139696</u-row
      >
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      type: 0,

      delta: 50, //触发值
      touchStartX: 0, // 触屏起始点x
      touchStartY: 0, // 触屏起始点y
      touchIndex: 0,

      headStyle: {
        fontSize: "34rpx",
        color: "#8a8b8e",
        fontWeight: "bold",
        borderBottom: "1rpx dashed #efefef",
        padding: "20rpx 0",
        boxSizing: "border-box",
      },
      headStyle1: {
        fontSize: "34rpx",
        color: "#8a8b8e",
        fontWeight: "bold",
        padding: "20rpx 0",
        boxSizing: "border-box",
      },
    };
  },
  methods: {
    open(e) {
      this.show = true;
      this.type = e;
      console.log("open", e);
    },
    close() {
      this.show = false;
      this.touchIndex = 0;
      // console.log('close');
    },

    /**
     * 触摸开始
     **/
    touchStart(e) {
      console.log("触摸开始");
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
    },

    /**
     * 触摸结束
     **/
    touchEnd(e) {
      let deltaX = e.changedTouches[0].clientX - this.touchStartX;
      let deltaY = e.changedTouches[0].clientY - this.touchStartY;
      // X轴的滑动距离大于 delta，且此次事件是以X轴移动为主（左滑或者右滑）；
      if (
        Math.abs(deltaX) > this.delta &&
        Math.abs(deltaX) > Math.abs(deltaY)
      ) {
        if (deltaX >= 0) {
          if (this.touchIndex > 0) {
            this.touchIndex--;
          }
          // console.log('右滑', this.touchIndex);
        } else {
          if (this.touchIndex < 2) {
            this.touchIndex++;
          }
          // console.log('左滑', this.touchIndex);
        }
        // Y轴的滑动距离大于 delta，且此次事件是以Y轴移动为主（上滑或者下滑）；
      } else if (
        Math.abs(deltaY) > this.delta &&
        Math.abs(deltaX) < Math.abs(deltaY)
      ) {
        if (deltaY < 0) {
          // console.log('上滑');
        } else {
          // console.log('下滑');
        }
        // 两轴位移都特别小，可以判断是点击
      } else if (Math.abs(deltaY) < 25 && Math.abs(deltaX) < 25) {
        // console.log('点击');
      } else {
        // console.log('可能是误触');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.make {
  width: 570rpx;
  overflow: hidden;
  padding: 20rpx 20rpx 100rpx 20rpx;
  box-sizing: border-box;
}
</style>
